<template>
  <header>
    <div class="m-site-topbar">
      <div class="topbar-nav m-container">
        <div class="go-back" @click="handleBack" v-if="isShowBack">
          <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/go-back-icon.png" />
        </div>
        <div class="logo-box">
          <img :src="locale == 'en-US' ? enLogo : zhLogo" :title="`${$t('platform')}`" />
        </div>
        <div class="right-menu">
          <el-dropdown trigger="click">
            <div class="avatar-wrapper">
              <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/m-language.png" />
              <span>{{ language == "English" ? "EN" : "中" }}</span>
            </div>
            <el-dropdown-menu slot="dropdown">
              <nuxt-link :to="{ path: $route.path }" exact v-for="item in options" :key="item.value" @click.native="changeLanguage(item.value)">
                <el-dropdown-item>{{ item.label }}</el-dropdown-item>
              </nuxt-link>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
import { mapState, mapMutations } from "vuex"
export default {
  props: {},
  data() {
    return {
      zhLogo: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/logo.png",
      enLogo: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/logo-new-en.png",
      isShowBack: false,
      language: "",
      options: [
        {
          value: "zh-CN",
          label: "中文"
        },
        {
          value: "en-US",
          label: "English"
        }
      ]
    }
  },
  mounted() {
    this.showLanguage()
  },
  computed: { ...mapState(["locale"]) },
  components: {},
  watch: {
    $route: {
      immediate: true, //加上此配置之后，watch即可以在首次进入或刷新之后执行handler （），即初始化即可执行监听
      handler(to, from) {
        //监听之后执行的回调
        this.isShowBack = to.path.includes("m-home") ? false : true
      }
    }
  },
  methods: {
    ...mapMutations(["SET_LANG"]),
    handleBack() {
      this.$router.back()
    },
    showLanguage() {
      console.log("get locale", this.locale)
      const currentLang = this.locale || "zh-CN"
      switch (currentLang) {
        case "zh-CN":
          this.language = "中文"
          break
        case "en-US":
          this.language = "English"
          break
      }
    },
    changeLanguage(value) {
      switch (value) {
        case "zh-CN":
          this.language = "中文"
          this.$i18n.locale = value //关键语句
          this.SET_LANG(value)
          this.$cookies.set("lang", value) //持久化存储
          location.reload() //重新加载当前页面
          break
        case "en-US":
          this.language = "English"
          this.$i18n.locale = value //关键语句
          this.SET_LANG(value)
          this.$cookies.set("lang", value) //持久化存储
          location.reload() //重新加载当前页面
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.m-site-topbar {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  .topbar-nav {
    height: 225px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .go-back {
      height: 225px;
      display: flex;
      align-items: center;
      img {
        width: 46px;
        height: 92px;
      }
    }
    .logo-box {
      img {
        width: 840px;
        height: 87px;
      }
    }
    .right-menu {
      height: 225px;
      line-height: 225px;
      &:focus {
        outline: none;
      }
      .avatar-wrapper {
        display: flex;
        align-items: center;
        img {
          width: 72px;
          height: 72px;
        }
        span {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 60px;
          color: #333;
          margin-left: 20px;
        }
      }
    }
  }
}
</style>
